<template>
  <div id="root">
    <div id="right-box">
      <el-card id="title">
        <div>试卷名称：{{ examPaperName }}</div>
      </el-card>
      <el-card>
        <div id="question-box" v-for="(item, index) in answerItems" :key="index">
          <div>{{ index + 1 }}. {{ item.question.content.replace(/#/g, '____') }}</div>
          <div id="opt-box" v-if="item.questionOptions !== null">
            <div v-for="(option, oIndex) in item.questionOptions" :key="oIndex">
              {{ transNumber(option.order) }} . {{ option.content }}
            </div>
          </div>
          <div class="answer-box">
            参考答案：<span>{{ item.question.correctAnswer }}</span>
          </div>
          <div class="answer-box">
            考生答案：<span>{{ item.questionCustomerAnswer.answer }}</span>
          </div>
          <div id="score-box">
            <span>得分: {{ item.questionCustomerAnswer.customerScore }}</span>
          </div>
          <el-divider/>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Main from "@/layouts/Main.vue";
import PageHeader from "@/layouts/header/PageHeader.vue";

export default {
  name: "AnswerPaperRead",
  components: {PageHeader, Main},
  data() {
    return {
      examPaperName: this.$route.params.examPaperName,
      answerPaperId: this.$route.params.answerPaperId,
      answerItems: [],
    }
  },
  computed: {},
  mounted() {
    this.getAnswerPaperDetail();
  },
  methods: {
    transNumber(num) {
      let str = '';
      switch (num) {
        case 1:
          str = 'A';
          break;
        case 2:
          str = 'B';
          break;
        case 3:
          str = 'C';
          break;
        case 4:
          str = 'D';
          break;
      }
      return str;
    },
    getAnswerPaperDetail() {
      const url = `/answerPapers/${this.answerPaperId}`;
      this.axios.get(url).then(resp => {
        this.answerItems = resp.data;
      });
    },
    submitPaper() {
      const url = `/answerPapers/${this.answerPaperId}/${2}`;
      this.axios.put(url).then(resp => {
        if (resp.code === 200) {
          this.$message({
            message: '提交成功',
            type: 'success',
            center: true,
          });
        } else {
          this.$message({
            message: resp.message,
            type: 'error',
            center: true,
          });
        }
      });
    }
  },
}
</script>

<style scoped>
#right-box {
  margin: 20px;
}

#title{
  display: flex;
  justify-content: center;
  margin-bottom: 1em;
  div{
    font-weight: bold;
  }
}
#question-box {
  margin: 0 4em;

  div {
    margin: 1em 0;
  }

  .answer-box {
    margin-left: 1em;
  }

  #opt-box {
    margin-left: 2em;
  }

  #score-box {
    margin-left: 1em;
  }
}

</style>